<template>
  <div class="op-group comp-op-filter">
    <div class="op-title">筛选</div>
    <div class="option-item">
      <div class="title-row">
        <span class="label">
          <span
            class="view-icon"
            title="预览"
            @mouseleave="onMouseLeave()"
            @mouseenter="onMouseEnter($event, rowFilterSelectNullRows)"
          >
            <img src="~@/assets/dataset/preview.png" alt="preview" />
          </span>
          选出存在缺失值的行
        </span>
        <a-button
          v-if="isShowSub === false"
          class="op-btn"
          type="primary"
          size="small"
          @click="setSubStatus(true)"
          >确定</a-button
        >
      </div>
      <div v-if="isShowSub" class="detail-panel">
        <h6 class="op-sub-title option-title">操作</h6>
        <div
          v-for="(item, i) in options"
          :key="i"
          class="sub-item fixed"
          :class="{
            active: value === item.value,
          }"
          @click="onCheckItemClicked(item)"
        >
          <span class="check-item">
            <status :value="value === item.value"></status>
            <span
              class="view-icon sub-icon"
              style="transform: translateX(2px);"
              title="预览"
              @mouseleave="onMouseLeave()"
              @mouseenter="onMouseEnter($event, item.value)"
            >
              <img src="~@/assets/dataset/preview.png" alt="preview" />
            </span>
            <span class="label fixed">{{ item.label }}</span>
          </span>
        </div>
        <div class="button-row">
          <a-button class="op-btn-sub" size="small" @click="setSubStatus(false)"
            >取消</a-button
          >
          <a-button
            class="op-btn-sub"
            type="primary"
            size="small"
            @click="doOption"
            >确定</a-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import DataStore, { OptionPreViewAction } from '@/store/modules/dataview'
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import status from '../common/status.vue'
import OptionSettingCommon from '../common/vr-option-set-common'

/** 行相关操作 */
@Component({
  components: {
    status,
  },
})
export default class VisualRecommendation extends Vue {
  /** 操作配置 */
  @Prop({
    type: Array,
    default() {
      return [
        {
          label: '删除所选行',
          value: OptionPreViewAction.rowFilterSelectNullRowsDelete,
        },
        {
          label: '仅保留所选行',
          value: OptionPreViewAction.rowFilterSelectNullRowsKeep,
        },
      ]
    },
  })
  options!: Array<object>

  /** 重置触发标识 */
  get vrResetTag() {
    return DataStore.vrResetTag
  }

  /** 重置触发监听 */
  @Watch('vrResetTag')
  getResetTag() {
    this.isShowSub = false
    if (DataStore.vrCurrenSetMode !== null) {
      DataStore.setTableVrCurrenSetMode(null)
    }
  }

  /** 选出存在缺失值的行 */
  rowFilterSelectNullRows: string = `${OptionPreViewAction.rowFilterSelectNullRows}`

  /** 绑定值 */
  value: string = `${OptionPreViewAction.rowFilterSelectNullRowsDelete}`

  /** 操作详情展示/收起控制 */
  isShowSub: boolean = false

  /** 设置状态 */
  setSubStatus(state: boolean) {
    this.isShowSub = state
    if (state) {
      OptionSettingCommon.setRowFilterSelectNullRows(
        OptionPreViewAction.rowFilterSelectNullRows
      )
      this.$message.info('已选出包含缺失值的行')
    } else {
      DataStore.setTableVrCurrenSetMode(null)
    }
  }

  /** 预览icon鼠标移入 */
  onMouseEnter(event: any, action: string) {
    const target = event.target as HTMLElement
    if (target) {
      DataStore.setPreviewAction(action)
      DataStore.setHoverYPos(target.getBoundingClientRect().top - 16)
    }
  }

  /** 预览icon鼠标移出 */
  onMouseLeave() {
    DataStore.setHoverYPos(-1)
  }

  /** 操作 */
  doOption() {
    if (this.value === `${OptionPreViewAction.rowFilterSelectNullRowsDelete}`) {
      this.$emit('actiondone', {
        action: this.value,
        desc: '行操作，筛选面板 > 选出存在缺失值的行 > 删除所选行',
      })
    } else if (
      this.value === `${OptionPreViewAction.rowFilterSelectNullRowsKeep}`
    ) {
      this.$emit('actiondone', {
        action: this.value,
        desc: '行操作，筛选面板 > 选出存在缺失值的行 > 仅保留所选行',
      })
    }
  }

  /** 操作点击触发 */
  onCheckItemClicked(item: any) {
    this.value = `${item.value}`
  }
}
</script>
<style lang="less" scoped>
@import url('../op.less');
</style>
